<div class="row">
  <div id="builder-controls" class="col-3">
    <div id="controlWrapper">
      <div class="accordion" id="controlsPanel">
        <div class="card">
          <div class="card-header">
            <a href="#" class="btn btn-link" data-toggle="collapse" data-target="#structureControls">
              Structure Controls
            </a>
          </div>
          <div id="structureControls" class="collapse show" data-parent="#controlsPanel">
            <div class="card-body">
              <div class="list-group">
                <div *ngFor="let control of structureControls" [dndType]="control.typeController.dndType"
                     [dndDraggable]="control.typeController.content()"
                     class="list-group-item list-group-item-action">
                <span>
                  <fa-icon icon="control.typeController.icon"></fa-icon> {{ control.typeController.label }}
                </span>
                  <button type="button" class="btn btn-primary btn-sm float-right">
                    <fa-icon icon="bars"></fa-icon>
                  </button>
                  <div class="clearfix"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header">
            <a href="#" class="btn btn-link" data-toggle="collapse" data-target="#basicControls">
              Basic Controls
            </a>
          </div>
          <div id="basicControls" class="collapse" data-parent="#controlsPanel">
            <div class="card-body">
              <div class="list-group">
                <div *ngFor="let control of basicControls" [dndType]="control.typeController.dndType"
                     [dndDraggable]="control.typeController.content()"
                     class="list-group-item list-group-item-action">
                <span>
                  <fa-icon icon="{{control.typeController.icon}}"></fa-icon> {{ control.typeController.label }}
                </span>
                  <button type="button" class="btn btn-primary btn-sm float-right">
                    <fa-icon icon="bars"></fa-icon>
                  </button>
                  <div class="clearfix"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header">
            <a href="#" class="btn btn-link" data-toggle="collapse" data-target="#specialControls">
              Special Controls
            </a>
          </div>
          <div id="specialControls" class="collapse" data-parent="#controlsPanel">
            <div class="card-body">
              <div class="list-group">
                <div *ngFor="let control of specialControls" [dndType]="control.typeController.dndType"
                     [dndDraggable]="control.typeController.content()"
                     class="list-group-item list-group-item-action">
                <span>
                  <fa-icon [icon]="['fas', control.typeController.icon]"></fa-icon> {{ control.typeController.label }}
                </span>
                  <button type="button" class="btn btn-primary btn-sm float-right">
                    <fa-icon icon="bars"></fa-icon>
                  </button>
                  <div class="clearfix"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="builder-controls-action" class="btn-group btn-group-sm mt-2 justify-content-md-center" role="group"
           aria-label="Controls helper buttons">
        <button id="builder-controls-action-preview" type="button" class="btn btn-secondary" (click)="openPreview()">
          Preview
        </button>
        <button id="builder-controls-action-diagnostic" type="button" class="btn btn-secondary"
                (click)="openDiagnostic()">
          Diagnostic
        </button>
      </div>
    </div>
  </div>
  <div id="form-container" class="col-9">
    <div id="form-content" data-content="Drop section here" [ngClass]="{'empty': sections.length == 0 }"
         [dndDropzone]="['sections']" (dndDrop)="onDrop($event, sections)">
      <div style="border: 1px green solid; border-radius: 5px; padding: 15px;"
           dndPlaceholderRef>
        Drop section here
      </div>
      <section *ngFor="let section of sections; let x = index" dndEffectAllowed="copyMove" dndType="sections" [dndDraggable]="section"
               (dndMoved)="onDragged(section, sections, 'move')">
        <div class="card">
          <div class="card-header">
            <fa-icon [icon]="['far', 'object-group']"></fa-icon> {{section.label}}
            <span class="float-right">
              <button class="btn btn-link mr-1" type="button" data-toggle="collapse"
                      [attr.data-target]="'#section-' + x + section.name">
                <fa-icon [icon]="['far', 'edit']"></fa-icon>
              </button>
              <button class="btn btn-link mr-1" type="button" dndHandle>
                <fa-icon [icon]="['fas', 'arrows-alt']"></fa-icon>
              </button>
              <button class="btn btn-link" type="button" (click)="remove(section, sections)">
                <fa-icon [icon]="['far', 'window-close']"></fa-icon>
              </button>
            </span>
          </div>
          <div class="collapse show" id="section-{{x}}{{section.name}}">
            <div class="card-body">
              <cmdb-config-edit [canEdit]="canEdit" [groupList]="groupList" [userList]="userList"
                                [sections]="sections"
                                [data]="section"></cmdb-config-edit>
            </div>
          </div>
          <div class="card-body" [dndDropzone]="['inputs']"
               (dndDrop)="onDrop($event, section.fields)">
            <div style="border: 1px red solid; border-radius: 5px; padding: 15px;"
                 dndPlaceholderRef>
              Drop field here
            </div>
            <div *ngFor="let field of section.fields; let y = index" dndEffectAllowed="move" dndType="inputs"
                          [dndDraggable]="field"
                          (dndMoved)="onDragged(field, section.fields, 'move')">

              <div class="fields card">
                <div class="card-header">
                  <fa-icon [icon]="['fas', matchedType(field.type)]"></fa-icon> {{field.label}}
                  <span class="float-right">
                    <button class="btn btn-link mr-1" type="button" data-toggle="collapse"
                            [attr.data-target]="'#field-'+ x + y + field.name">
                      <fa-icon [icon]="['far', 'edit']"></fa-icon>
                    </button>
                    <button class="btn btn-link mr-1" type="button" dndHandle>
                      <fa-icon [icon]="['fas', 'arrows-alt']"></fa-icon>
                    </button>
                    <button class="btn btn-link" type="button" (click)="remove(field, section.fields)">
                      <fa-icon [icon]="['far', 'window-close']"></fa-icon>
                    </button>
                  </span>
                </div>
                <div class="card-body collapse" id="field-{{x}}{{y}}{{field.name}}">
                  <cmdb-config-edit [canEdit]="canEdit" [groupList]="groupList" [userList]="userList"
                                    [sections]="sections"
                                    [data]="field"></cmdb-config-edit>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>
